<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数组reduce 函数网页版修改</title>
  <style>
     body{
       width:100%;
       height:100%;
     }
     .box{
       width: 500px;
       height: 100px;
       overflow-y: scroll;
    
       
     }
     .red{
       width:60%;
       height:400px;
       
       background: red;
     }

  </style>
</head>
<body id="a">
  <div class="box" id="box">
    <div class="red" id="red" >
    </div>
    111111
  </div>
  <a href="underScore.js"   download="underScore">点击下载</a>
  
  
</body>

<script>
  var arr =[1,2,3,4,5,6,7,8];
  // reduce 函数第二个参数是初始值，不传从数组的第一个值开始作为total，第二个值为v,传了则将它作为total,v 为数组的第一个值
  var result = arr.reduce(function(total,v,i,arr){
     return total + v;
  });
  // console.log(result);

  function add(num){
    return function(i){
      return num + i;
    }
  }
  var add1 = add(1);
  var add2 = add(2);
  var add3 = add(3);
  var add4 = add(4);
  var add5 = add(5);

  var arrFun = [add1,add2,add3,add4,add5];

  var resultArrFun = arrFun.reduce(function(total,v,i,arr){
     if(typeof total =='function') total= total(0);
     return total  + v(0);
  });
   console.log(resultArrFun);
 // 进阶用法就是流程控制
 // 比如空容器[], 依次push 进去add1,add2,add3,是同步相互依赖的，add2 依赖add1 的结果，add3依赖add2的结果
 // 所有执行顺序是从左到右，reduce ,先进先出，队列；反过来如果是栈，先进后出，先执行add3,add2,add1,就要使用reduceRight 从右边往左。或者一开始
 // 不用push 而使用 shift 了

  // 自实现reduce 函数
  function myReduce(fn,initVal){
    var _this = this; // 调用对象必须是一个数组
    var length = _this.length;
    var total;
    var i ;
    if( initVal!== undefined){
      total = initVal;
      i = 0;
     }else{
      total =  _this[0] ;
      i=1;
    }
    for(i; i<length;i++){
      // 这一步是reduce 的本质，将上一步的计算结果赋值给第一个参数，也就是闭包保存起来，供下一次回调函数利用利用
      total = fn(total, _this[i], i , _this);
      console.log('total='+total)
    }
    return total;
  }
   Array.prototype.myReduce = myReduce;
   var result2 = arrFun.myReduce(function(total,v,i,arr){
    if(typeof total =='function') total= total(0);
     return total + v(0);
  });
  console.log(result2)
</script>

</html>